<template>
    <div class="homewrap">
        <el-container class="container">
            <el-header id="header">
                <Banner></Banner>
            </el-header>
            <el-main id="main" ref="main-ref" :style="`min-height:` + minHeight + `px`">
                <router-view>
                </router-view>
            </el-main>
            <el-footer id="footer">
                <Footer></Footer>
            </el-footer>
            <Drawer id="drawer" @sendToIndex="jumpToThePath"></Drawer>
        </el-container>

        <!-- 登陆面板 -->
        <LoginPanel></LoginPanel>


        <div class="music-controller">
            <AplayerController></AplayerController>
        </div>
    </div>
</template>

<script>
import Banner from "@/components/web/header/Banner";
import Drawer from "@/components/web/drawer/Drawer";
import Footer from "@/components/web/footer/Footer";
import LoginPanel from "@/components/web/loginPanel/LoginPanel";
import AplayerController from "@/components/web/aplayer/AplayerController";

// import { AESUtil } from "@/assets/utils/digest"

export default {
    name: "WebIndex",
    components: {
        Banner,
        Drawer,
        Footer,
        LoginPanel,
        AplayerController,
    },
    mounted() {
        // 挂载时对 #main 进行最小高度赋值
        this.minHeight = window.innerHeight - 60 - 60;
        const that = this;
        window.onresize = function () {
            // 处理频繁触发onresize导致页面卡顿问题
            if (that.resizeFlag) {
                that.resizeFlag = false;
                setTimeout(function () {
                    that.minHeight = window.innerHeight - 60 - 60;
                    console.log("minHeight", that.minHeight);
                    that.resizeFlag = true;
                }, 300)
            }
        }
    },
    data() {
        return {
            // 主内容最小高度
            minHeight: "",
            // 窗口大小变化调整标志
            resizeFlag: true,
            // 显示登陆面板
            loginPanelVisible: false,
        }
    },
    methods: {
        jumpToThePath(path) {
            this.$router.push(path)
        }
    }
}
</script>

<style lang="scss" scoped>

.homewrap {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.el-container {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.el-main {
    height: 100%;
    overflow: hidden;
}

.el-footer {
    display: flex;
    height: 4vh;
    width: 100%;
    align-items: center;
}

#header {
    /*background-color: #42b983;*/
    position: sticky;
    top: 0;
    z-index: 999;
}


#footer {
    background-color: rgba(160, 150, 150, 0.7);
}

#main {
    position: relative;
    width: 1280px;
    margin: auto;
}

#main > div {
    // position:absolute会导致轮播图的右侧按钮显示不全
    //position: absolute;
    width: 100%;
    height: 100%;
}

.music-controller {
    position: absolute;
    bottom: 100px;
    //float: left;
    //display: flow;
    z-index: 999;
    //display: flex;

}

</style>
